<template>
    <div class="index" v-wechat-title="$route.meta.title">
        <div class="container">
            <keep-alive>
                <router-view/>
            </keep-alive>
        </div>
        <cube-tab-bar
                v-model="currentValue"
                :data="tabs"
                @change="changeHandler">
            <cube-tab v-for="(item, index) in tabs"
                      :label="item.value"
                      :key="item.value">
                <div class="tab-icon-normal" :class="{'tab-icon-active':currentValue===item.value}">
                    <!-- name为icon的插槽 -->
                    <div class="tab-icon" slot="icon">
                        <svg class="svg-icon" aria-hidden="true">
                          <use :xlink:href="'#'+item.icon"></use>
                        </svg>
                    </div>
                    <!-- 默认插槽 -->
                    {{item.label}}
                </div>
            </cube-tab>
        </cube-tab-bar>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import {State, Action} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    @Component({
        components: {

        },
    })
    export default class Index extends Scene {
        private currentValue: string = "/";
        @State("UserStore")
        private user!: InterfaceUser;

        private activated() {
            this.currentValue = this.$route.path;
        }

        private mounted(): void {
            this.currentValue = this.$route.path;
        }

        private changeHandler(value: string): void {
            this.currentValue = value;
            this.switchTab({
                path: value
            });
            // if you clicked different tab, this methods can be emitted
            // console.log(value)
        }

        public get tabs(): Array<object> {
              return [{
                  value: "/",
                  label: "商城",
                  icon: 'icon-shangcheng'
              }, {
                  value: "/productCategory",
                  label: "分类",
                  icon: 'icon-fenlei_'
              }, {
                  value: "/shoppingCart",
                  label: "购物车",
                  icon: 'icon-ic_shoppingCar_'
              }, {
                  value: "/mine",
                  label: "我的",
                  icon: 'icon-my_1'
              }];
        }
    }
</script>

<style scoped lang="stylus">
    .index
        max-height 100vh;
        max-width 100vw;
        overflow hidden;

    .container
        height calc(100vh - 47px - var(--safe-area-inset-bottom));

    .tab-icon
        width 24px;
        height 22px;
        font-size 22px;
        text-align center;
        margin -1px auto 2px auto;
        position relative;

    .tab-icon-active
        filter grayscale(0) !important;
        -moz-filter grayscale(0) !important;
        -ms-filter grayscale(0) !important;
        -o-filter grayscale(0) !important;
        -webkit-filter grayscale(0) !important;

    .tab-icon-normal
        -webkit-filter grayscale(100%);
        -moz-filter grayscale(100%);
        -ms-filter grayscale(100%);
        -o-filter grayscale(100%);
        filter grayscale(100%);

    .cube-tab-bar
        border-top 1px solid #ddd
        padding-bottom var(--safe-area-inset-bottom);
        background #ffffff;

        >>> .cube-tab
            font-size 12px

            >>>div
                -webkit-filter grayscale(100%);
                -moz-filter grayscale(100%);
                -ms-filter grayscale(100%);
                -o-filter grayscale(100%);
                filter grayscale(100%);

            >>> i
                font-size 22px

            >>> div
                margin-top 2px

    .chat-badge
        position absolute;
        top -5px;
        right -8px;
        z-index 40;
        transform scale(.8)

    .svg-icon
        width 1em;
        height 1em;
        overflow hidden;
        display block;
        margin-bottom 3px;
        padding-bottom 3px;
        box-sizing content-box
</style>
